<template>
    <div class="skeleton-about">
        <p class="blink" style="z-index: 0; border-radius: 0% / 0%; background: rgb(239, 239, 239); width: 100%; padding-bottom: 106.667%; margin-top: 0%"></p>

        <p class="blink" style="z-index: 1; border-radius: 0% / 0%; background: rgb(239, 239, 239); width: 100%; padding-bottom: 106.667%; margin-top: 109.864%"></p>

        <p class="blink" style="z-index: 2; border-radius: 0%; background: rgb(239, 239, 239); width: 100%; padding-bottom: 106.667%; margin-top: 0%"></p>

        <p class="blink" style="z-index: 3; border-radius: 0%; background: rgb(239, 239, 239); width: 100%; padding-bottom: 106.667%; margin-top: 109.864%"></p>
    </div>
</template>

<style lang="less" scoped>
.skeleton-about {
    @keyframes blink {
        0% {
            opacity: 0.4;
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 0.4;
        }
    }
    .blink {
        animation-duration: 2s;
        position: absolute;
        animation-name: blink;
        animation-iteration-count: infinite;
    }
}
</style>
